import groupBy from 'lodash.groupby';
import React  from 'react';
import PropTypes from 'proptypes';
import Loader from './loader.jsx';
import Message from './message.jsx';
import QueryResultTable from './query-result-table.jsx';

export default function QueryResult(props){
  // static propTypes = {
  //   widthOffset: PropTypes.number.isRequired,
  //   heigthOffset: PropTypes.number.isRequired,
  //   onCopyToClipboardClick: PropTypes.func.isRequired,
  //   onSaveToFileClick: PropTypes.func.isRequired,
  //   resultItemsPerPage: PropTypes.number.isRequired,
  //   copied: PropTypes.bool,
  //   saved: PropTypes.bool,
  //   query: PropTypes.string,
  //   results: PropTypes.arrayOf(
  //     PropTypes.shape({
  //       fields: PropTypes.array,
  //       rows: PropTypes.array,
  //       rowCount: PropTypes.number,
  //       affectedRows: PropTypes.number,
  //     })
  //   ),
  //   isExecuting: PropTypes.bool,
  //   error: PropTypes.object,
  // };

  // shouldComponentUpdate(nextProps) {
  //   return (
  //     (!nextProps.isExecuting && props.isExecuting) ||
  //     nextProps.query !== props.query ||
  //     (nextProps.copied && !props.copied) ||
  //     nextProps.heigthOffset !== props.heigthOffset ||
  //     nextProps.widthOffset !== props.widthOffset
  //   );
  // }

  // componentWillUpdate(nextProps) {
  //   const renderingResults = !nextProps.isExecuting && props.isExecuting;
  //   if (renderingResults && refs.loader) {
  //     // const loader = refs.loader.getElementsByClassName('text loader')[0];
  //     // loader.innerText = 'Rendering result';
  //   }
  // }

  const renderQueryResult=(queryResult)=> {
    const {
      fields,
      rows,
      rowCount,
      affectedRows,
      queryIndex,
      totalQueries,
      command,
      isMultipleResults,
    } = queryResult;

    const isSelect = command === 'SELECT';
    const isExplain = command === 'EXPLAIN';
    const isUnknown = command === 'UNKNOWN';
    if (!isSelect && !isExplain && !isUnknown) {
      const msgAffectedRows = affectedRows
        ? `Affected rows: ${affectedRows}.`
        : '';
      return (
        <Message
          key={`msgAffectedRows-${queryIndex}`}
          message={`Query executed successfully. ${msgAffectedRows}`}
          type="success"
        />
      );
    }

    if (isExplain) {
      const title = fields[0].name;
      return (
        <Message
          key={queryIndex}
          preformatted
          title={title}
          message={rows.map(row => row[title]).join('\n')}
        />
      );
    }

    let msgDuplicatedColumns = null;
    const groupFields = groupBy(fields, field => field.name);
    const duplicatedColumns = Object.keys(groupFields).filter(
      field => groupFields[field].length > 1
    );
    if (duplicatedColumns.length) {
      msgDuplicatedColumns = (
        <Message
          key={`msgDuplicatedColumns-${queryIndex}`}
          type="info"
          message={
            `Duplicated columns: ${duplicatedColumns.join(', ')}. ` +
            'It may cause the result in the second column overwriting the first one. ' +
            'Use an alias to avoid it.'
          }
        />
      );
    }

    let widthOffset = props.widthOffset;
    if (isMultipleResults) {
      widthOffset += 30; // padding of the query result box
    }
    const tableResult = (
      <QueryResultTable
        key={queryIndex}
        widthOffset={widthOffset}
        heigthOffset={props.heigthOffset}
        resultItemsPerPage={props.resultItemsPerPage}
        copied={props.copied}
        saved={props.saved}
        fields={fields}
        rows={rows}
        rowCount={rowCount}
        onSaveToFileClick={props.onSaveToFileClick}
        onCopyToClipboardClick={props.onCopyToClipboardClick}
      />
    );

    if (totalQueries === 1) {
      return (
        <div key={queryIndex}>
          {msgDuplicatedColumns}
          {tableResult}
        </div>
      );
    }

    return (
      <div key={queryIndex} className="ui segment">
        <div className="ui top left attached label">Query {queryIndex + 1}</div>
        {msgDuplicatedColumns}
        {tableResult}
      </div>
    );
  }

    const { isExecuting, error, results } = props;
    if (error) {
      if (error.message) {
        const errorBody = Object.keys(error)
          .filter(key => error[key] && key !== 'message')
          .map(key => `${key}: ${error[key]}`)
          .join('\n');

        return (
          <Message
            preformatted
            type="negative"
            title={error.message}
            message={errorBody}
          />
        );
      }
      return <pre>{JSON.stringify(error, null, 2)}</pre>;
    }

    if (isExecuting) {
      return <div  style={{ minHeight: '250px' }} />;
    }

    if (!results) {
      return null;
    }

    const totalQueries = results.length;
    return (
      <div id="query-result">
        {results.map((result, idx) =>
          renderQueryResult({
            ...result,
            totalQueries,
            queryIndex: idx,
            isMultipleResults: results.length > 1,
          })
        )}
      </div>
    );
  }

